<template>
  <div>
    <a-tree checkable :expandedKeys='expandedKeys' @expand='expand' :tree-data="treeData" :replace-fields="replaceFields" @select="onSelect"
      :checkedKeys='selectTreeNode' @check="onCheck" />
    <button type="button" @click="click1">按钮</button>
  </div>
</template>
<script>
const treeData = [
  {
    name: "parent 1",
    key: "0-0",
    child: [
      {
        name: "张晨成",
        key: "0-0-0",
        child: [
          { name: "leaf", key: "0-0-0-0" },
          { name: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        name: "parent 1-1",
        key: "0-0-1",
        child: [{ key: "0-0-1-0", name: "zcvc" }],
      },
    ],
  },
];

export default {
  data() {
    return {
      treeData,
      expandedKeys: [],
      selectTreeNode: [], //点击节点
      replaceFields: {
        children: "child",
        title: "name",
      },
    };
  },
  methods: {
    click1() {
      this.selectTreeNode;
      debugger;
    },
    expand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      console.log(expandedKeys);
    },

    // 点击节点
    onSelect(selectedKeys, info) {
      this.selectTreeNode = selectedKeys;

      //点击节点展开 收起
      let key = info.node.dataRef.key;
      // 判断是否存在
      let index = this.expandedKeys.indexOf(key);
      debugger;
      if (index != -1) {
        this.expandedKeys.splice(index, 1);
      } else {
        this.expandedKeys.push(key);
      }
    },
    onCheck(checkedKeys, info) {
      this.selectTreeNode = checkedKeys;
      // console.log("onCheck", checkedKeys, info);
    },
  },
};
</script>
